<script setup>
import { ref, onMounted } from 'vue'
import { getDoctorSchedules } from '../../api/doctor'
import { useAuthStore } from '../../store/auth'

const auth = useAuthStore()
const list = ref([])
const total = ref(0)
const query = ref({ date: '', page: 1, size: 10 })
const loading = ref(false)

// 状态标签映射（整数：1 可用 / 0 不可用）
const scheduleStatusLabel = (s) => ({ 1: '可用', 0: '不可用' }[s] || s)

const fetchList = async () => {
  loading.value = true
  try {
    const data = await getDoctorSchedules(auth.currentId, { date: query.value.date || undefined, page: query.value.page, size: query.value.size })
    list.value = data.list || []
    total.value = data.total || 0
  } finally { loading.value = false }
}

onMounted(fetchList)
</script>

<template>
  <el-card>
    <h3>医生日程</h3>
    <el-form :inline="true" :model="query" class="mb-2">
      <el-form-item label="日期"><el-date-picker v-model="query.date" type="date" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" /></el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query.page=1;fetchList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" v-loading="loading" style="width:100%">
      <el-table-column prop="scheduleId" label="ID" width="90" />
      <el-table-column prop="doctorId" label="医生ID" width="100" />
      <el-table-column prop="scheduleDate" label="日期" />
      <el-table-column prop="timePeriod" label="时段" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">{{ scheduleStatusLabel(row.status) }}</template>
      </el-table-column>
    </el-table>
    <div class="mt-2">
      <el-pagination background layout="total, prev, pager, next" :total="total" :page-size="query.size" :current-page="query.page" @current-change="(p)=>{query.page=p;fetchList()}" />
    </div>
  </el-card>
</template>

<style scoped>
.mb-2{ margin-bottom:12px; }
.mt-2{ margin-top:12px; }
</style>